<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <div style="padding: 0 24px">
        <el-row>
          <div class="accountInfo">
            <ul class="bankInfo">
              <li>
                <p class="salaryTitle">工资专户账号</p>
                <p class="color999">专户银行</p>
                <p class="color333">{{ bankName || '--' }}</p>
                <p class="color999">专户账号</p>
                <p class="color333">{{ account || '--' }}</p>
              </li>
              <li>
                <p class="color999">工资专户余额</p>
                <p class="color333 balace" style="font-size: 20px">
                  ￥{{ balance || '--' }}
                </p>
                <div class="botBorder"></div>
                <div class="payoff">
                  <div>
                    <p class="color999">总缴纳</p>
                    <p class="color333">￥{{ payTotal || '--' }}</p>
                  </div>
                  <div>
                    <p class="color999">总支出</p>
                    <p class="color333">￥{{ expensesTotal || '--' }}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-row>
        <el-row>
          <div class="runWater">流水明细</div>
        </el-row>
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker
                v-model="filterField.createDate"
                type="date"
                placeholder="请选择"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="commonBtn"
              ></el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="salaryAccountList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="createTime"
            label="时间"
            align="center"
            :formatter="formatTd"
            width="175px"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="金额(元)"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="类型"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="所属项目"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" min-width="80">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click.stop="updateData(scope.$index, scope.row, 'update')"
                >修改</el-link
              >
              <el-link
                type="primary"
                @click.stop="
                  updateData(scope.$index, scope.row, 'distribution')
                "
                >分配</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关工资专户数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <el-dialog
      :title="eventType === 'update' ? '修改流水' : '分配流水'"
      :visible.sync="runningWater"
      :close-on-click-modal="false"
      @close="cancelAccountDialog()"
      width="716px"
      custom-class="brand-dialog-min-width accountDialog"
      :modal-append-to-body="false"
    >
      <el-form
        :model="runningWaterForm"
        :rules="formRules"
        ref="runningWaterForm"
      >
        <el-form-item
          label="流水时间"
          class="row-padding-bottom"
          label-width="135px"
        >
          <span>你好</span>
        </el-form-item>
        <el-form-item
          label="余额"
          class="row-padding-bottom"
          label-width="135px"
        >
          <span>你好</span>
        </el-form-item>
        <el-form-item
          label="类型"
          class="row-padding-bottom"
          label-width="135px"
        >
          <span>你好</span>
        </el-form-item>
        <el-form-item
          label="备注"
          class="row-padding-bottom"
          label-width="135px"
        >
          <span>你好</span>
        </el-form-item>
        <el-form-item label="所属项目" prop="projectName" label-width="135px">
          <el-select
            v-model="runningWaterForm.projectId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) of projectListOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <span style="margin-left: 135px"
          >注：选择该条流水的归属，以便区分项目资金使用缴存情况，请谨慎操作</span
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelAccountDialog()" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveBankInfo()"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'flowManagement',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '流水管理',
      titleExplain:
        '本页面展示使用同一专户项目的流水信息，需要企业自行调整区分流水的归属项目，以便劳动监察查询及统计，请及时分配区分，以免造成不良影响。',
      bankName: '', //专户银行
      bankSiteName: '', //银行网点名称
      account: '', //专户账号
      balance: '', //专户余额
      payTotal: '', //专户总缴纳
      expensesTotal: '', //专户总支出
      filterField: {
        createDate: '',
      },
      salaryAccountList: [
        {
          createTime: '2020-06-22',
          total: '2200',
          typeDesc: '哈哈',
          bankName: '中国银行',
          account: '4545121546',
        },
      ],
      isShow: false,
      loading: false,
      requestUrl: 'api-acc/accass/expand/list',
      runningWater: false,
      runningWaterForm: {
        projectId: '',
      },
      projectListOptions: [
        {
          projectId: '123456',
        },
      ],
      formRules: {
        projectName: [
          { required: true, message: '所属项目不能为空', trigger: 'change' },
        ],
      },
      eventType: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    getTableList(data) {
      this.salaryAccountList = data
      this.loading = false
      if (this.salaryAccountList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    getAcountInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: this.filterField.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.bankName = data.bankName
            this.bankSiteName = data.bankSiteName ? data.bankSiteName : ''
            this.account = data.account
            this.balance = data.balance
            this.payTotal = data.payTotal
            this.expensesTotal = data.expensesTotal
          }
        })
        .catch((error) => {
          this.$message.error('专户数据获取失败')
        })
    },
    // 分配修改
    updateData(index, row, type) {
      this.eventType = type
      this.runningWater = true
    },
    cancelAccountDialog() {
      this.runningWater = false
      this.$refs.runningWaterForm.resetFields()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 213px;
  }
  .runWater {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #dee5f4;
    height: 28px;
  }
  .accountInfo {
    ul li {
      width: 415px;
      height: 200px;
      float: left;
      padding: 24px 33px;
      border: 1px solid #dee5f4;
      .balace {
        font-size: 24px;
      }
      .color999 {
        font-size: 14px;
      }
      .color333 {
        font-size: 14px;
        line-height: 34px;
      }
      &:first-child {
        background: #f5f7fb;
      }
      &:last-child {
        border-left: none;
        .botBorder {
          width: 100%;
          height: 1px;
          background: #dee5f4;
          margin: 26px 0;
        }
        .payoff div {
          width: 50%;
          float: left;
        }
      }
      .salaryTitle {
        font-size: 16px;
        margin-bottom: 15px;
        color: #999;
      }
    }
  }
}
</style>
